<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Donation Platform Home</title>
    <style>
        .container {
            width: 80%;
            margin: auto;
            padding: 20px;
        }
        h2 {
            border-bottom: 1px solid #ccc;
            padding-bottom: 10px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        table, th, td {
            border: 1px solid #ccc;
        }
        th, td {
            padding: 10px;
            text-align: left;
        }
        th {
            background-color: #f4f4f4;
        }
    </style>
</head>
<body>

<div class="container">
    <h2>最新的10条捐赠项目</h2>
    <table id="newest10">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Author</th>
                <th>Need Money</th>
                <th>Current Money</th>
                <th>Progress</th>
                <th>Send Time</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <h2>受捐人数最多的15个项目</h2>
    <table id="most-contribute-projects15">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Author</th>
                <th>Donation Count</th>
                <th>Send Time</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <h2>受捐金额最多的15个项目</h2>
    <table id="most-money-donations15">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Author</th>
                <th>Current Money</th>
                <th>Progress</th>
                <th>Send Time</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <h2>指定置顶的3个项目</h2>
    <table id="top-donations3">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Author</th>
                <th>Profile</th>
                <th>Current Money</th>
                <th>Contribute People</th>
                <th>Send Time</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <h2>最新的10条捐赠信息</h2>
    <table id="newest-user-donations10">
        <thead>
            <tr>
                <th>Username</th>
                <th>Donation Name</th>
                <th>Donation Type</th>
                <th>Donation Amount</th>
                <th>Donation Time</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <h2>捐赠人前10名排行榜</h2>
    <table id="top-contributors10">
        <thead>
            <tr>
                <th>Username</th>
                <th>Total Donation Amount</th>
                <th>Title</th>
                <th>Donation Project Count</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        fetchData('http://localhost:8080/home/newest10', 'newest10', populateNewestDonations);
        fetchData('http://localhost:8080/home/most-contribute-projects15', 'most-contribute-projects15', populateMostContributeProjects);
        fetchData('http://localhost:8080/home/most-money-donations15', 'most-money-donations15', populateMostMoneyDonations);
        fetchData('http://localhost:8080/home/top-donations3', 'top-donations3', populateTopDonations);
        fetchData('http://localhost:8080/home/newest-user-donations10', 'newest-user-donations10', populateNewestUserDonations);
        fetchData('http://localhost:8080/home/top-contributors10', 'top-contributors10', populateTopContributors);
    });

    function fetchData(url, tableId, populateFunction) {
        fetch(url)
            .then(response => response.json())
            .then(data => {
                if (data.code === "00000") {
                    populateFunction(data.data, tableId);
                } else {
                    console.error('Error fetching data:', data.message);
                }
            })
            .catch(error => console.error('Fetch error:', error));
    }

    function populateNewestDonations(data, tableId) {
        const tableBody = document.getElementById(tableId).querySelector('tbody');
        tableBody.innerHTML = '';
        data.forEach(item => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${item.id}</td>
                <td><a href="project-details.html?id=${item.id}">${item.name}</a></td>
                <td>${item.author}</td>
                <td>${item.needMoney}</td>
                <td>${item.currentMoney}</td>
                <td>${item.progress}%</td>
                <td>${item.sendTime}</td>
            `;
            tableBody.appendChild(row);
        });
    }

    function populateMostContributeProjects(data, tableId) {
        const tableBody = document.getElementById(tableId).querySelector('tbody');
        tableBody.innerHTML = '';
        data.forEach(item => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${item.id}</td>
                <td><a href="project-details.html?id=${item.id}">${item.name}</a></td>
                <td>${item.author}</td>
                <td>${item.donationCount}</td>
                <td>${item.sendTime}</td>
            `;
            tableBody.appendChild(row);
        });
    }

    function populateMostMoneyDonations(data, tableId) {
        const tableBody = document.getElementById(tableId).querySelector('tbody');
        tableBody.innerHTML = '';
        data.forEach(item => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${item.id}</td>
                <td><a href="project-details.html?id=${item.id}">${item.name}</a></td>
                <td>${item.author}</td>
                <td>${item.currentMoney}</td>
                <td>${item.progress}%</td>
                <td>${item.sendTime}</td>
            `;
            tableBody.appendChild(row);
        });
    }

    function populateTopDonations(data, tableId) {
        const tableBody = document.getElementById(tableId).querySelector('tbody');
        tableBody.innerHTML = '';
        data.forEach(item => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${item.id}</td>
                <td><a href="project-details.html?id=${item.id}">${item.name}</a></td>
                <td>${item.author}</td>
                <td>${item.profile}</td>
                <td>${item.currentMoney}</td>
                <td>${item.contributePeople}</td>
                <td>${item.sendTime}</td>
            `;
            tableBody.appendChild(row);
        });
    }

    function populateNewestUserDonations(data, tableId) {
        const tableBody = document.getElementById(tableId).querySelector('tbody');
        tableBody.innerHTML = '';
        data.forEach(item => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${item.username}</td>
                <td>${item.donationName}</td>
                <td>${item.donationType}</td>
                <td>${item.donationAmount}</td>
                <td>${item.donationTime}</td>
            `;
            tableBody.appendChild(row);
        });
    }

    function populateTopContributors(data, tableId) {
        const tableBody = document.getElementById(tableId).querySelector('tbody');
        tableBody.innerHTML = '';
        data.forEach(item => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${item.username}</td>
                <td>${item.totalDonationAmount}</td>
                <td>${item.title}</td>
                <td>${item.donationProjectCount}</td>
            `;
            tableBody.appendChild(row);
        });
    }
</script>

</body>
</html>
